<template>
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
     <div id="main" style="width:100%;height:100%"></div>
</template>

<script>
    // let echarts = require('echarts/lib/echarts')
    // // 引入饼状图组件
    // require('echarts/lib/chart/pie')
    // // 引入提示框和title组件
    // require('echarts/lib/component/tooltip')
    // require('echarts/lib/component/title')
    import * as echarts from 'echarts';
    export default {
        name: "EC",
        data(){
            return {
                vale:[]
            }
        },
        created() {
            this.$nextTick(()=>{
                this.getEc()
            })
        },
        methods:{
            getEc(){
                var data;
                var that=this;
                this.$http.get("lease/brand/EC").then(r=>{
                    data= r.data.result.vale;
                    console.log(data);
                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption ({
                        backgroundColor: '#fcfcfc',

                        title: {
                            text: '销售额',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#5e55fc'
                            }
                        },

                        tooltip: {
                            trigger: 'item'
                        },

                        visualMap: {
                            show: false,
                            min: 1,
                            max: 200000,
                            inRange: {
                                colorLightness: [0,3]
                            }
                        },
                        series: [
                            {
                                name: '营业额',
                                type: 'pie',
                                radius: '80%',
                                center: ['50%', '50%'],
                                data:
                                    data
                                        .sort(function (a, b) { return a.value - b.value; }),
                                roseType: 'radius',
                                label: {
                                    color: 'rgba(0, 0, 0, 0.5)'
                                },
                                labelLine: {
                                    lineStyle: {
                                        color: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                },
                                itemStyle: {
                                    color: '#11c21c',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },

                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function (idx) {
                                    return Math.random() * 200;
                                }
                            }
                        ]
                    });
                });



            }

        }
    }
</script>

<style >

</style>
